import React, { useEffect, useState } from 'react';
import { Space, Table, Image, Button, Modal, Input, Row, Col } from 'antd';
import axios from 'axios'


// 跟表格配置相对应的数据包【测试数据包】
// const data = [
//   {
//     "_id": "676a13a88b29e42694daed56",
//     "title": "巴厘岛 | 总有一个假日，要属于bali",
//     "author": {
//       "avatar": "https://dimg04.c-ctrip.com/images/0Z85u120009d7a407CAD8_R_180_180.jpg",
//       "name": "筱莲"
//     },
//     "content": "是没想到，提笔写此篇 巴厘岛 之行的回忆时，是此番境况。",
//     "commentNumber": "214",
//     "viewNumber": "567709",
//     "imageUrl": "https://dimg04.c-ctrip.com/images/0102c120008gmz1epE5D9_D_230_160.jpg",
//   }
// ];
const Product = () => {
  let [data,setData] = useState([])
  // 删除数据的逻辑函数
  const handleDel = async (record,index)=>{
    console.log('删除功能');
    // 1. 发起删除请求，删除数据库数据
    let url = `http://localhost:3000/travel?id=${record._id}`
    let res = await axios.delete(url)
    console.log(res);
    
    // 2. 删除data中对应的那一条数据
    if(res.data.code==1){
      data.splice(index,1)  //删除数组中某一条数据
      setData([...data])  //拓展运算符，确保set一个全新的数组给data
    }
  }
  // 表格配置（表头文字、自定义表格内容）
  const columns = [
    {
      title: '攻略名称',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '评论数量',
      dataIndex: 'commentNumber',
      key: 'commentNumber',
    },
    {
      title: '阅读量',
      dataIndex: 'viewNumber',
      key: 'viewNumber',
    },
    {
      title: '封面图',
      dataIndex: 'imageUrl',
      key: 'imageUrl',
      render:(value,record,index)=>{
        //自定义渲染函数
        // value 当前这一格的数据
        // record 当前这一行的数据对象
        // index  当前这一行的序号
        return <Image src={value} height={80}/>
      }
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record,index) => (
        <Space size="middle">
          <Button 
            type="primary" 
            size='small' 
            danger 
            onClick={()=>{handleDel(record,index)}}
          >删除</Button>
          <Button 
            type="primary" 
            size='small' 
            onClick={()=>{handleEdit(record,index)}}
          >编辑</Button>
        </Space>
      ),
    },
  ];
  useEffect(()=>{
    //从网络加载数据并赋值给data
    axios({
      url:'http://localhost:3000/travel',
      method:'GET'
    }).then(res=>{
      console.log(res);  //网络接口下发的数据
      setData(res.data.data)
    })
  },[])


  // 编辑功能
  const [isModalOpen, setIsModalOpen] = useState(false); //控制弹窗显示隐藏
  const [title,setTitle] = useState('1') //显示原来的title
  const [viewNumber,setViewNumber] = useState('2') //显示原来的viewNumber
  const [id,setId] = useState('') //点击编辑按钮的时候，记录被编辑商品id
  //编辑按钮事件
  const handleEdit = (record,index)=>{
    setIsModalOpen(true)
    // edit-1. 在编辑弹窗中显示待编辑内容
    setTitle(record.title)
    setViewNumber(record.viewNumber)
    setId(record._id)
  }
  const handleOk = async () => {
    setIsModalOpen(false);
    console.log(title,viewNumber);
    // edit-3. 发起更新数据网络请求
    let url = `http://localhost:3000/travel?id=${id}`
    let res = await axios.put(url,{
      "title":title,
      "viewNumber":viewNumber
      // ... 其他数据
    })
    console.log('更新数据',res);

    // edit-4. 更新本地data数据
    for(let i=0;i<data.length;i++){
      if(data[i]._id==id){
        data[i].title = title
        data[i].viewNumber = viewNumber
        break
      }
    }
    setData([...data])

  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };

  // 搜索功能
  // search-1. 实时获取搜索框内容
  const [searchTitle,setSearchTitle] = useState('')
  const handleSearch = async ()=>{
    // search-2. 点击搜索按钮发起搜索请求，得到搜索出的数据
    console.log(searchTitle);
    let url = `http://localhost:3000/travel/search?title=${searchTitle}`
    let res = await axios.get(url)
    console.log('搜索结果',res);
    // search-3. 更新原本的data
    setData(res.data.data)
  }
  return <>
    <Row>
      <Col span={6}>
        <Input 
          placeholder="请输入攻略名称进行查询" 
          value={searchTitle}
          onChange={(ev)=>{
            setSearchTitle(ev.target.value)
          }}
        />
      </Col>
      <Col span={4}>
        <Button type="primary" onClick={handleSearch}>搜索</Button>
      </Col>
      {/* <Col span={6}>
        <Button type="primary">搜索</Button>
      </Col> */}
    </Row>
    <Table columns={columns} dataSource={data} />
    <Modal title="编辑旅游攻略" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
      {/* edit-2. 拿到用户在Input中输入的最新value */}
      <Input placeholder="请输入攻略名称" value={title} onChange={(ev)=>{
        setTitle(ev.target.value)  //拿到用户最新数据的数据
      }}/>
      <Input placeholder="请输入用户访问量" value={viewNumber} onChange={(ev)=>{
        setViewNumber(ev.target.value)  //拿到用户最新数据的数据
      }}/>
    </Modal>
  </>
}
export default Product;